<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table,td{
            border: 1px solid black;
        }
        td{
            width: 137px;
        }
    </style>
</head>
<body>
        <p>
            <input type="text" name="gname" placeholder="商品名称">
            <input type="text" name="gprice" placeholder="商品价格">
            <input type="text" name="gcount" placeholder="商品数量">
            <input type="button" value="添加" ondblclick="addGoods()">
        </p>
        <table>
            <tbody>
            <tr>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>商品数量</td>
                <td>操作</td>
            </tr>
            </tbody>
        </table>
    <script>
        function addGoods(){
            //1.获取输入框内容
            var inputs = document.getElementsByTagName('input');
            var gname = inputs[0].value;
            var gprice = inputs[1].value;
            var gcount = inputs[2].value;
            var tbody = document.getElementsByTagName('tbody')[0];
            //2.按照表格结构创建行和单元格,填充内容
            var tr = document.createElement('tr');
            var tdName = document.createElement('td');
            tdName.innerHTML = gname;
            
            var tdPrice = document.createElement('td');
            tdPrice.innerHTML = gprice;

            var tdCount = document.createElement('td');
            tdCount.innerHTML = gcount;
            
            var tdOperation = document.createElement('td');
            tdOperation.innerHTML = '<button>修改</button><button>删除</button>'
            //操作按钮
            // var btnUpdate = document.createElement('button');
            // btnUpdate.innerHTML = '修改';
            // var btnDelete = document.createElement('input');
            // btnDelete.type = 'button';
            // btnDelete.value = '删除'; 
            // tdOperation.appendChild(btnUpdate);
            // tdOperation.appendChild(btnDelete);
            
            //3.添加显示
            tr.appendChild(tdName)
            tr.appendChild(tdPrice)
            tr.appendChild(tdCount)
            tr.appendChild(tdOperation)

            tbody.appendChild(tr);
        }
    </script>
</body>
</html>